<template>
  <div
    id="breathe-ball"
    class="breathe-container"
    :style="{
      backgroundImage: `radial-gradient( #1232d2 ${progress}%,#ffffffc2 ${progress + 3}%)`,
    }"
  >
    <div>{{ statusText }} {{ duration }}</div>
    <div>{{ playStatusText }}...</div>
    <div class="time-status">{{ timeStatus }} 次</div>
    <div class="close" @click="close">X</div>
  </div>
</template>
<script>
import gsap, { Power4 } from "gsap";

export default {
  name: "star-breathe",
  data() {
    return {
      timeline: null,
      statusText: "点击开始",
      inhaleAudio: new Audio("https://project-star.oss-cn-beijing.aliyuncs.com/npm/static/mp3/inhale.mp3"),
      duration: "",
      exhaleAudio: new Audio("https://project-star.oss-cn-beijing.aliyuncs.com/npm/static/mp3/exhale.mp3"),
      progress: 0,
      playStatusText: "",
      timeStatus: 0,
      t1: null,
      ball: null,
    };
  },
  computed: {},
  mounted() {
    const self = this;
    this.exhaleAudio.volume = 1;
    this.inhaleAudio.volume = 1;
    const ball = document.querySelector("#breathe-ball");
    const t1 = gsap.timeline({
      repeat: Infinity,
      paused: true,
      onStart() {
        self.timeStatus += 1;
      },
      onRepeat() {
        self.timeStatus += 0.5;
      },
    });
    this.t1 = t1;
    this.ball = ball;
    ball.addEventListener("click", this.actionPlay);
    // inhale
    t1.to(ball, {
      duration: 4,
      scale: 1.4,

      opacity: 1,
      ease: Power4.easeOut,
      onStart() {
        self.inhaleAudio.play();
        self.statusText = "inhale";
      },
      onComplete() {
        self.statusText = "Hold";
      },
      onUpdate() {
        self.duration = 5 - parseInt(4 * this.progress() + 1);
        self.progress = parseInt(60 * this.progress());
      },
    });

    // Hold
    t1.to(ball, {
      duration: 7,
      scale: 1.4,
      onStart() {
        self.statusText = "Hold";
      },
      onComplete() {
        self.statusText = "exhale";
        self.exhaleAudio.play();
      },
      onUpdate() {
        self.duration = 8 - parseInt(7 * this.progress() + 1);
      },
    });
    // exhale
    t1.to(ball, {
      duration: 8,
      scale: 1,
      ease: Power4.easeIn,
      onStart() {
        self.statusText = "exhale";
      },
      onComplete() {
        self.statusText = "";
      },
      onUpdate() {
        self.duration = 9 - parseInt(8 * this.progress() + 1);
        self.progress = 60 - parseInt(60 * this.progress());
      },
    });
    // rest
    t1.to(ball, {
      duration: 1,
      onStart() {
        self.statusText = "rest";
      },
      onComplete() {
        self.statusText = "inhale";
        self.inhaleAudio.play();
      },
      onUpdate() {
        self.duration = "";
      },
    });
  },
  methods: {
    actionPlay() {
      const self = this;
      const { t1 } = this;
      t1.paused() ? t1.play() : t1.pause();
      t1.paused() ? (self.playStatusText = "暂停中") : (self.playStatusText = "进行中");

      if (self.statusText === "inhale") {
        self.inhaleAudio.paused ? self.inhaleAudio.play() : self.inhaleAudio.pause();
      } else if (self.statusText === "exhale") {
        self.exhaleAudio.paused ? self.exhaleAudio.play() : self.exhaleAudio.pause();
      }
    },
    close() {
      this.$emit("close");
    },
  },
  unmounted() {
    this.ball.removeEventListener("click", this.actionPlay);
    this.exhaleAudio.pause();
    this.exhaleAudio = null;
    this.inhaleAudio.pause();
    this.inhaleAudio = null;
  },
};
</script>
<style>
.breathe-container {
  /* position:fixed; */
  position: relative;
  /* top:80px;
  right:60px; */
  z-index: 10;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  font-size: 18px;
  color: #ffffff;
  font-weight: 900;
  background-color: #3b67ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  justify-content: center;
  /* background-image: radial-gradient( #1232d2 10%,#ffffffc2 19%); */
}
.breathe-container div:nth-child(2) {
  font-size: 8px;
  font-weight: 100;
}
.breathe-container .time-status {
  position: absolute;
  font-size: 10px;
  right: 0px;
  /* transform: translateX(-50%); */
  top: -10px;
  color: #ffffff;
  padding: 2px 5px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}
.breathe-container .close {
  position: absolute;
  left: -5px;
  top: -5px;
  font-size: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  text-align: center;
  line-height: 20px;
}
</style>
